<template>
  <div class="container">
    <!-- 头部查询 -->
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="角色名称">
          <el-input
            v-model="search"
            placeholder="请输入角色名称"
          />
        </el-form-item>
        <el-button
          style="margin-left: 5px"
          type="primary"
          @click="roleSearch"
        >查询</el-button>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="btn">
      <el-button type="primary" icon="el-icon-plus" @click="roleAdd">增加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="roleDelete">删除</el-button>
      <el-button type="primary" icon="el-icon-video-play" @click="resources">资源分配</el-button>
      <el-button type="primary" icon="el-icon-s-custom" @click="user">用户分配</el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新</el-button>
    </div>
    <Table
      :role-data="roleData"
      :role-page="rolePage"
      :selection="selection"
      :role-copy="roleCopy"
      :role-edit="roleEdit"
      :delete="Delete"
      :role-look="roleLook"
    />
    <!-- 分页条 -->
    <div class="paginate">
      <el-pagination
        :v-model="rolePage"
        :current-page.sync="rolePage.pageNum"
        :page-size="rolePage.pageSize"
        :page-sizes="rolePage.pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rolePage.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 角色弹窗 -->
    <RoleDialog
      ref="roleDialog"
      :add-title="addTitle"
      :add-data="addData"
      :add-show="addShow"
      :add-close="addClose"
      :add-click="addClick"
      :edit-click="editClick"
    />
    <!-- 资源弹窗 -->
    <ResourceDialog
      ref="resource"
      :role-id="roleId"
      :selections="selections"
      :resource-title="resourceTitle"
      :resource-show="resourceShow"
      :resource-close="resourceClose"
      :resource-click="resourceClick"
    />
    <!-- 用户分配 -->
    <UserDialog
      :selections="selections"
      :user-title="userTitle"
      :user-show="userShow"
      :user-close="userClose"
      :user-click="userClick"
    />
  </div>
</template>

<script>
import { commonQuery, add, batchRemove, queryRoleById, modify, remove } from '../../../api/right/role'
import Table from './table.vue'
import RoleDialog from './role-dialog.vue'
import ResourceDialog from './resources.vue'
import UserDialog from './user-dialog.vue'
export default {
  name: 'Role',
  components: { Table, RoleDialog, ResourceDialog, UserDialog },
  data() {
    return {
      search: '',
      roleData: [],
      rolePage: {
        total: null,
        pageNum: 1, // 页号
        pageSize: 5, // 页大小
        pageSizes: [5, 10, 15, 30, 50, 100, 200], // 页大小选择
        pages: null
      },
      roleQuery: {}, // 检索传参
      addData: { // 表单数据
        name: '',
        code: '',
        remark: '',
        status: 1
      },
      roleInitData: { // 表单数据
        name: '',
        code: '',
        remark: '',
        status: 1
      },
      addTitle: '角色弹窗', // 角色弹窗标题
      addShow: false, // 角色弹窗显示
      selections: [], // 选择器
      resourceTitle: '资源弹窗', // 资源弹窗标题
      resourceShow: false, // 资源弹窗
      roleId: '',
      userTitle: '用户弹窗',
      userShow: false
    }
  },
  // 实例创建后调用onShow方法
  created() {
    this.onShow(this.rolePage.pageNum)
  },
  methods: {
    // 初始化数据
    onShow(pageNum) {
      this.roleQuery.total = this.rolePage.total
      this.roleQuery.pageNum = pageNum
      this.roleQuery.pageSize = this.rolePage.pageSize
      commonQuery(this.roleQuery)
        .then((response) => {
          const { total, pageNum, pageSize, pages } = response // 如果异常则被axios 的拦截器拦截并且显示错误码和消息
          this.rolePage.total = parseInt(total)
          this.rolePage.pages = parseInt(pages)
          this.roleData = response.data
          console.log(this.roleData)
        })
        .catch(() => {
          console.log('网络错误，请检查网络')
        })
    },
    // 更改页大小
    handleSizeChange(val) {
      this.rolePage.pageSize = val
      this.onShow(this.rolePage.pageNum)
    },
    // 跳转页码
    handleCurrentChange(val) {
      this.onShow(val)
    },
    // 角色名称查询
    roleSearch() {
      this.roleQuery.name = this.search // 将角色名称存入查询参数
      this.rolePage.total = null
      this.rolePage.pages = null
      this.rolePage.pageNum = 1 // 重置页码
      this.onShow(this.rolePage.pageNum) // 查询数据
    },
    // 增加角色
    roleAdd() {
      this.addShow = true
      this.addTitle = '增加角色'
      this.$refs.roleDialog.onshow()
    },
    // 关闭增加弹窗
    addClose() {
      this.addShow = false
      this.addData = this.roleInitData
    },
    // 点击确认增加
    addClick(roleAdd) {
      this.addShow = false
      roleAdd.version = '1'
      roleAdd.createdBy = '2'
      roleAdd.tenantId = '1'
      roleAdd.companyId = '1'
      roleAdd.orgId = '1337376369553833984'
      add(roleAdd)
        .then((response) => {
          // 新增之后重新加载
          this.onShow(1)
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        })
        .catch(() => {
          console.log('添加失败')
        })
    },
    // 资源分配按钮
    resources() {
      if (this.selections == null || this.selections.length === 0) {
        this.$message.error('至少选择一个角色进行操作')
        return
      }
      this.resourceShow = true
      this.resourceTitle = '资源分配'
      this.$refs.resource.onshow()
    },
    // 关闭资源弹窗
    resourceClose() {
      this.resourceShow = false
    },
    // 点击确认增加
    resourceClick() {
      this.resourceShow = false
      this.onShow(1)
    },
    // 接受table的已选传值
    selection(multipleSelection) {
      this.selections = multipleSelection
    },
    // 批量删除
    roleDelete() {
      if (this.selections == null || this.selections.length === 0) {
        this.$message.error('至少选择一条进行操作')
        return
      }
      const roleSelectionS = new Array(this.selections.length)
      for (let i = 0; i < this.selections.length; i++) {
        roleSelectionS[i] = {
          id: this.selections[i].id,
          version: this.selections[i].version
        }
      }
      if (roleSelectionS.length !== 0) {
        this.$confirm('确定删除记录吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            batchRemove(roleSelectionS).then((response) => {
              this.onShow(1)
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      } else {
        this.$message({
          message: '请选择需要删除的数据',
          type: 'warning'
        })
      }
    },
    // 角色分配
    user() {
      if (this.selections == null || this.selections.length === 0) {
        this.$message.error('至少选择一个角色进行操作')
        return
      }
      this.userShow = true
    },
    // 关闭角色分配弹窗
    userClose() {
      this.userShow = false
      this.onShow(1)
    },
    // 确认角色分配
    userClick() {
      this.userShow = false
      this.onShow(1)
    },
    // 刷新
    refresh() {
      this.onShow(1)
    },
    // 角色复制
    roleCopy(row) {
      this.addTitle = '角色复制'
      this.addShow = true
      // 传入id查询数据库
      queryRoleById(row.id)
        .then((res) => {
          this.addData = res
          setTimeout(() => {
            this.$refs.roleDialog.onshow()
          }, 1)
        })
        .catch(() => {
          console.log('网络错误')
        })
    },
    // 角色编辑
    roleEdit(row) {
      this.addTitle = '角色编辑'
      this.addShow = true
      queryRoleById(row.id)
        .then((res) => {
          this.addData = res
          setTimeout(() => {
            this.$refs.roleDialog.onshow()
          }, 1)
        })
        .catch(() => {
          console.log('网络错误')
        })
    },
    // 确认编辑
    editClick(roleAdd) {
      const roleVo = JSON.parse(JSON.stringify(roleAdd))
      modify(roleVo)
        .then((response) => {
          console.log(response)
          // debugger
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          // 刷新
          this.onShow(1)
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '修改失败!'
          })
        })
        .finally(() => {
          this.addShow = false
        })
    },
    // 删除角色
    Delete(row) {
      this.$confirm('确定删除记录吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          remove(row.id, row.version)
            .then((response) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.onShow(1)
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 查看权限
    roleLook(row) {
      this.resourceShow = true
      this.resourceTitle = '查看权限'
      this.roleId = row.id
      this.$refs.resource.look()
    }

  }
}
</script>

<style>
    .container{
      padding: 4vh;
    }
    /* 查询部分 */
    .search{
      width: 100%;
      height: 5vh;
      display: flex;
      align-items: center;
    }
    .title{
      font-size: 20px;
      font-weight: bold;
    }
    /* 查询输入框 */
    .input{
      width: 16vw;
      height: 5vh;
      margin-inline: 1vw;
    }
    /* 表格上侧操作按钮 */
    .btn{
      margin-block: 4vh;
      height: 5vh;
    }
    /* 表格部分 */
    /* .roleTable{
      height: 70vh;
    } */
    /* 表格内操作按钮 */
    /* .elBtn{
      margin-inline: 1vw;
    } */
</style>
